<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/show/show_banner.png" style="width:100%" alt />
      <div class="bread">
        <p v-if="$route.query.orderId=='基本陈列' ">
          <router-link to="/">首页</router-link>》展览 》基本陈列
        </p>
        <p v-if="$route.query.orderId=='临时展览'">
          <router-link to="/">首页</router-link>》展览 》临时展览
        </p>
        <p v-if="$route.query.orderId=='网上展厅'">
          <router-link to="/">首页</router-link>》展览 》网上展厅
        </p>
      </div>
    </div>
    <div class="bg_person">
      <div class="content gwgk">
        <div class="left">
          <ul class="nav">
            <li @click="tiaoz1(index+1)" v-for="(item,index) of nav" :key="index">
              <!-- <router-link :to="item.href"> -->
              <span :class="{blue:$route.query.orderId==item.name}">{{item.name}}</span>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>
        <div class="right">
          <router-view ref="line"></router-view>
        </div>
        <div></div>
      </div>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      zhiyuanzhezhijia: "",
      zhidujianshe2: "",
      nav: [
        {
          name: "基本陈列",
          href: "/linzhan/basez",
        },
        {
          name: "临时展览",
          href: "/linzhan/linzhan2",
        },
        {
          name: "网上展厅",
          href: "/linzhan/year",
        },
      ],
      index: 1,
    };
  },
  components: {
    foot2: foot2,
  },
  methods: {
    tiaoz1(i) {
      if (i == 1) {
        this.$router
          .push({
            path: "/linzhan/basez/:id",
            query: { orderId: "基本陈列" },
          })
          .catch((err) => {
            err;
          });
      } else if (i == 2) {
        let time = new Date();
        let year = time.getFullYear();

        this.$refs.line.i = 0;
        this.$router
          .push({
            path: "/linzhan/line/year1/:id",
            query: { orderId: "临时展览", lookUrl: year },
          })
          .catch((err) => {
            err;
          });
      } else if (i == 3) {
        this.$router
          .push({
            path: "/linzhan/year/:id",
            query: { orderId: "网上展厅" },
          })
          .catch((err) => {
            err;
          });
      }
    },
  },
  // created() {
  //   this.zhiyuanzhezhijia = "/zhidujianshe/zhiyuanzhezhijia";
  //   this.zhidujianshe2 = "/zhidujianshe/zhidujianshe2";
  // },

  // beforeRouteUpdate(to, from, next) {
  //   this.zhiyuanzhezhijia = "/zhidujianshe/zhiyuanzhezhijia";
  //   this.zhidujianshe2 = "/zhidujianshe/zhidujianshe2";

  //   next();
  // },
};
</script>
<style scoped>
li {
  list-style: none;
}
p,
ul,
li {
  padding: 0px;
  margin: 0px;
}

.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}
.bg_person {
  width: 100%;
  height: 100%;
  background: url("../../assets/image/show_bg2.png");
  background-repeat: no-repeat;
}
.gwgk.content {
  display: flex;

  color: #4e4b4b;
  width: 1200px;

  margin: auto;
  padding-top: 44px;
  box-sizing: border-box;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: #4e69a1;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
.gwgk .left {
  width: 195px;
  background: url("../../assets/image/left_nav.png") no-repeat;
}
.gwgk .left ul {
  padding: 30px;
  box-sizing: border-box;
}
.gwgk .left .nav li {
  font-size: 18px;
  color: #6e6e6e;
  width: 140px;
  cursor: pointer;
  box-sizing: border-box;
}
.gwgk .left .nav li:first-child {
  padding-top: 0px;
  padding-bottom: 16px;
}

.gwgk .left .nav li span {
  display: inline-block;
  margin-left: 30px;
}
.gwgk .left .nav li:not(:last-child) {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.gwgk .right {
  width: 940px;

  padding: 0 16px 0;
  box-sizing: border-box;
}

.gwgk .blue {
  color: #003567;
}
</style>